<template>
  <div class="commodity">
    <div class="list" v-for="item in goodsList" :key="item.id" @click="$router.push({path: '/commodityInfo', query: {id: item.id}})">
      <img :src="item.img_url" alt />
      <p>{{ item.title }}</p>
      <div class="item">
        <p>
          <span class="now">￥{{ item.sell_price }}</span>
          <span class="old">￥{{ item.market_price }}</span>
        </p>
        <p class="item-bottom">
          <span>热卖中</span>
          <span>剩{{ item.stock_quantity }}件</span>
        </p>
      </div>
    </div>
    <mt-button type="danger" size="large" @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
export default {
  name: "commodity",
  data() {
    return {
      goodsList: []
    }
  },
  created() {
    this.getGoodsList()
  },
  methods: {
    getGoodsList() {
      // 获取手机列表信息
      /* this.$axios.get("http://suggest.taobao.com").then(response => {
          // 请求成功
        })
        .catch(error => {
          // 请求失败
        }); */
      // 自己生成手机列表
      let phoneList = [
        {
          id: 0,
          title: "华为 畅享9 Plus 全面屏超清大屏四摄学生智能手机",
          add_time: "1563858964",
          abstract: "6.5英寸全面屏 4000mAh大电池长续航",
          img_url: "https://img.alicdn.com/imgextra/i4/TB1Lm2ThcfpK1RjSZFOGoK6nFXa_094250.jpg",
          sell_price: 5780,
          market_price: 6388,
          stock_quantity: 60
        },
        {
          id: 1,
          title: "vivo iQOO Neo高通骁龙845处理器",
          add_time: "1563858365",
          abstract: "正品vivoiqooneo iqooneo6大整点前5分钟送耳机/骁龙845芯片/3期免息",
          img_url: "https://img.alicdn.com/imgextra/i8/TB1NR7haWL7gK0jSZFBIAlZZpXa_022845.jpg",
          sell_price: 1998,
          market_price: 2199,
          stock_quantity: 100
        },
        {
          id: 2,
          title: "小米Play手机官方旗舰店新正品",
          add_time: "1563825875",
          abstract: "2098元起!送原厂碎屏险！",
          img_url: "https://img.alicdn.com/imgextra/i6/TB1LB3NVSzqK1RjSZFjjWLlCFXa_110638.jpg",
          sell_price: 2398,
          market_price: 2499,
          stock_quantity: 120
        },
        {
          id: 3,
          title: "vivo S1Pro全新手机",
          add_time: "1563851458",
          abstract: "新品6+128G下单参与12好礼选1赠送",
          img_url: "https://img.alicdn.com/imgextra/i1/3937219703/O1CN01UVfb2Y2LY1YsGYWmt_!!3937219703.png",
          sell_price: 899,
          market_price: 999,
          stock_quantity: 30
        },
        {
          id: 4,
          title: "三星Galaxy S10 SM-G9730",
          add_time: "1563858952",
          abstract: "骁龙855 4G新品游戏全面屏智能手机",
          img_url: "https://img.alicdn.com/imgextra/i3/TB1VQRNIH2pK1RjSZFsHO1NlXXa_025708.jpg",
          sell_price: 5999,
          market_price: 6100,
          stock_quantity: 130
        },
      ]
      this.goodsList = phoneList
    },
    getMore() {
      let MoreList = [
        {
          id: 5,
          title: "Meizu/魅族 Note9",
          add_time: "1563836985",
          abstract: "大电池学生游戏老人大屏智能手机",
          img_url: "https://img.alicdn.com/imgextra/i1/1695308781/O1CN01DdIJTX2EjkM7QAHAI_!!1695308781.jpg",
          sell_price: 1299,
          market_price: 1598,
          stock_quantity: 160
        },
        {
          id: 6,
          title: "Meitu/美图 T9小樱限量版",
          add_time: "1563854751",
          abstract: "美图T9 12期免息送原装耳机+补光灯等",
          img_url: "https://img.alicdn.com/imgextra/i3/TB1clb8xFGWBuNjy0FbWxb4sXXa_122013.jpg",
          sell_price: 1499,
          market_price: 1699,
          stock_quantity: 190
        },
        {
          id: 7,
          title: "红魔3代 nubia/努比亚 红魔Mars电竞游戏手机",
          add_time: "1563824825",
          abstract: "红魔2三代官方正品手机全网通 高通晓龙855",
          img_url: "https://img.alicdn.com/imgextra/i2/1730436394/O1CN01IHq4K21x6Uz5e2Y0d_!!1730436394.jpg",
          sell_price: 3799,
          market_price: 3999,
          stock_quantity: 180
        },
      ]
      if(this.goodsList.length < 6) {
        this.goodsList = this.goodsList.concat(MoreList)
        this.$toast("加载成功")
      }else {
        this.$toast("没有更多数据")
      }
      
    }
  }
};
</script>

<style lang="scss" scoped>
.commodity {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  justify-content: space-between;
  .list {
    width: 48%;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    padding: 1px;
    margin: 4px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 260px;
    img {
      width: 100%;
    }
    .item {
      background: #eee;
      padding: 5px;
      p {
        line-height: 24px;
      }
      .now {
        color: red;
        font-weight: bold;
        font-size: 16px;
      }
      .old {
        text-decoration: line-through;
        font-size: 12px;
        margin-left: 10px;
      }
      .item-bottom {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
      }
    }
  }
}
</style>